<template>
  <view class="address gap-col  row between h4" @click.stop="openGoogleMap">
    <view class="row">
      <iconfont name="icon-location"></iconfont>
      <text class="gap-row-left">{{ computeCity }}{{ address }}</text>
    </view>
    <u-icon name="arrow-right" size="14"></u-icon>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'location',
  props: {
    city: Number,
    address: String,
    mapname: String,
    latitude: Number,
    longitude: Number,
  },
  data() {
    return {};
  },

  computed: {
    ...mapGetters(['cityList']),
    computeCity() {
      var data = this.cityList.find((item) => item.value == this.city);
      return data ? data.text + ',' : '';
    }
  },

  methods: {
    openGoogleMap() {
      uni.openLocation({
        latitude: this.latitude, // 纬度
        longitude: this.longitude, // 经度
        name: this.mapname, // 位置名
        address: this.address, // 地址的详细说明
        scale: 18, // 缩放比例（谷歌地图中的缩放级别）
        success() {
          console.log('地图打开成功');
        },
        fail(error) {
          console.error('地图打开失败', error);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.address {
  color: #8e8e8e;
}
</style>
